<template>
  <NavBar title="我的粉丝" backgroundColor="#161622">
    <template #left>
      <div class="left" @click="goBack">
        <Icon name="zuojiantou" size="18" color="#fff"></Icon>
      </div>
    </template>
  </NavBar>

  <div class="following-container">
    <div class="following-list">
      <div class="following-item" v-for="user in followersList" :key="user.userId">
        <div class="avatar">
          <img :src="user.userAvatar" :alt="user.userNickname" />
        </div>
        <div class="info">
          <div class="name">{{ user.userNickname }}</div>
          <div class="desc">关注了你</div>
          <div class="time">{{ user.formattedTime }}</div>
        </div>
        <div class="follow-button" @click="toggleFollow(user)" :class="{
          'mutual': user.bothStatus === 1,
          'follow': user.bothStatus === 0
        }">
          {{ user.bothStatus === 1 ? '互相关注' : '+ 关注' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useDateFormat } from '@/composables/useDateFormat'
import NavBar from '@/components/Common/NavBar/index.vue'
import Icon from '@/components/Common/Icon/index.vue'
import { getMyFollowersAPI, followUserAPI } from '@/api/my'
import { useUserIDStore } from '@/stores/UserID'

const router = useRouter()
const userIDStore = useUserIDStore()
const currentUserId = userIDStore.userInfo?.userId
const followersList = ref([])

const goBack = () => {
  router.push({ name: 'my' })
}

// 获取我的粉丝列表
const fetchFollowersList = async () => {
  if (!currentUserId) return

  try {
    const res = await getMyFollowersAPI(currentUserId)
    if (res.code === 200) {
      followersList.value = res.data.map(user => ({
        ...user,
        userAvatar: 'http://43.138.15.137:3000' + user.userAvatar,
        formattedTime: useDateFormat(user.followedAt || user.createdAt, 'YYYY-MM-DD').formatted
        // bothStatus:
        //   1 → 互相关注
        //   0 → 他关注你，你未关注他
      }))
    }
  } catch (error) {
    console.error('获取粉丝列表失败:', error)
  }
}

// 切换关注状态
const toggleFollow = async (user) => {
  if (!currentUserId) return

  try {
    const res = await followUserAPI(currentUserId, user.userId)

    if (user.bothStatus === 0) {
      // 当前未关注 → 执行关注
      if (res.data === '关注成功') {
        user.bothStatus = 1 // 变为互相关注
      }
    } else if (user.bothStatus === 1) {
      // 当前互相关注 → 执行取消关注
      if (res.data === '取消关注成功') {
        user.bothStatus = 0 // 变回“+ 关注”
      }
    }
  } catch (error) {
    console.error('操作失败:', error)
  }
}

onMounted(() => {
  fetchFollowersList()
})
</script>

<style lang="scss" scoped>
.following-container {
  background-color: #161622;
  padding-bottom: 35px;

  .following-list {
    padding: 10px;

    .following-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-right: 10px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: cover;
        }
      }

      .info {
        flex: 1;

        .name {
          font-size: 14px;
          font-weight: bold;
          color: #fff;
          line-height: 1;
        }

        .desc {
          font-size: 14px;
          color: #fff;
          margin-bottom: 5px;
          font-weight: bold;
        }

        .time {
          font-size: 12px;
          color: #879394;
          font-weight: bold;
        }
      }

      .follow-button {
        width: 60px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        padding: 4px 8px;
        border-radius: 2px;
        white-space: nowrap;
        cursor: pointer;

        &.mutual {
          color: #fff;
          background-color: #393b44;
          /* 互相关注 */
        }

        &.follow {
          color: #fff;
          background-color: #f9355f;
          /* 未关注态，显示“+ 关注” */
        }
      }
    }
  }
}
</style>